<template>
  <div class="wrapper">
    <header-nav :index_num="index_num"></header-nav>
    <div id="box">
      <div class="left" :style="{height:heightVal+'px'}">
        <div
          class="list"
          @click="btn(index)"
          v-for="(list,index) in text"
          :key="index"
          :class="sub == index ? 'color' : ''"
        >{{list}}</div>
      </div>
      <div class="right">
        <apply v-if="sub == 0" @listenToChildExen="showMsgFromChild"></apply>
        <collection v-if="sub == 1" @listenToChildExen="showMsgFromChild"></collection>
        <declare v-if="sub == 2" @listenToChildExen="showMsgFromChild"></declare>
        <modify v-if="sub == 3" @listenToChildExen="showMsgFromChild"></modify>
        <collection1 v-if="sub == 4" @listenToChildExen="showMsgFromChild"></collection1>
        <feedbook v-if="sub == 5" @listenToChildExen="showMsgFromChild"></feedbook>
      </div>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
import HeaderNav from "../../components/HeaderNav";
import FooterNav from "../../components/FooterNav";
import Apply from "./Apply";
import Collection from "./Collection";
import Collection1 from "./Collection1";
import Feedbook from "./Feedbook";
import Declare from "./Declare";
import Modify from "./Modify";

export default {
  components: {
    HeaderNav,
    FooterNav,
    Apply,
    Collection,
    Collection1,
    Feedbook,
    Declare,
    Modify
  },
  props: {},
  data() {
    return {
      index_num: 3,
      text: [
        "党组织申请",
        "我的收藏",
        "项目申报",
        "个人中心-修改密码",
        "@书记",
        "问题反馈"
      ],
      // text: [
      //   "党组织申请",
      //   "我的收藏",
      //   "项目申报",
      //   "个人中心-修改密码",
      //   "it数据",
      //   "@书记"
      // ],
      // text: ['党组织申请', '项目申报', '个人中心-修改密码'],
      sub: 0,
      heightVal: 1050
    };
  },
  computed: {},
  watch: {},
  methods: {
    showMsgFromChild(data) {
      this.heightVal = data;
    },
    btn(index) {
      let s = this.sub;
      s = index;
      this.sub = s;
      // console.log(this.sub)
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang='scss' scoped>
.wrapper {
  min-width: 1280px;

  #box {
    width: 1200px;
    margin: 40px auto 0;
    box-sizing: border-box;
    // padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .left {
      width: 241px;
      background-color: #ffffff;
      box-shadow: 0px 7px 11px 0px rgba(231, 231, 231, 0.7);
      border-radius: 2px;

      .list {
        width: 100%;
        height: 48px;
        margin-top: 21px;
        text-align: left;
        line-height: 48px;
        padding-left: 37px;
        box-sizing: border-box;
        font-family: "MicrosoftYaHei";
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
         cursor: pointer;
      }

      .color {
        position: relative;
        color: #e60012;

        &::after {
          content: "";
          width: 5px;
          height: 48px;
          background-color: #e60012;
          border-radius: 8px;
          position: absolute;
          left: 0%;
          top: 0%;
        }
      }
    }

    .right {
      width: 934px;
      background-color: #ffffff;
    }
  }

  .footer {
    margin-top: 80px;
  }
}
</style>
